<route lang="json5">
{
  style: {
    navigationStyle: 'custom',
    navigationBarTitleText: '我的会员卡',
  },
}
</route>
<template>
  <view class="container" :style="containerStyle">
    <!-- 顶部导航 -->
    <view class="top-bar flex items-center justify-between px-4 py-2">
      <view class="nav-back" @click="navigateBack">
        <wd-icon name="thin-arrow-left" size="22px"></wd-icon>
      </view>
      <text class="title font-bold">我的会员卡</text>
      <view class="nav-more">
      </view>
    </view>

    <!-- 会员卡列表 -->
    <view class="card-list px-3 py-2">
      <view v-for="(card, index) in cardList" :key="index" class="card-item mb-3">
        <view class="card-top flex justify-between items-center">
          <text class="card-type font-bold">{{ card.type }}</text>
          <text class="card-status {{ card.status === 'active' ? 'active' : 'expired' }}">
            {{ card.statusText }}
          </text>
        </view>
        <view class="card-middle flex justify-between mt-2">
          <view>
            <text class="card-number">卡号：{{ card.number }}</text>
            <text class="card-date block">有效期：{{ card.validDate }}</text>
          </view>
          <view class="card-balance text-right">
            <text class="balance-title">剩余次数</text>
            <text class="balance-value font-bold">{{ card.remainingTimes }}次</text>
          </view>
        </view>
        <view class="card-bottom flex justify-between mt-3 pt-3 border-t">
          <button class="btn-detail text-sm" @click="viewDetail(card.id)">查看详情</button>
          <button class="btn-use text-sm" :disabled="card.status !== 'active'" @click="useCard(card.id)">
            使用会员卡
          </button>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view v-if="cardList.length === 0" class="empty-container flex flex-col items-center justify-center h-1/2">
      <image src="/static/empty-card.png" class="w-20 h-20 mb-2" mode="widthFix"></image>
      <text class="text-gray-500 mb-4">暂无会员卡</text>
      <button class="btn-buy" @click="buyCard">立即购买</button>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { getMyCards } from '@/api/memberCard';

const cardList = ref([]);
const loading = ref(false);

// 屏幕安全区域逻辑（与课程预约页保持一致）
let safeAreaInsets: UniApp.SafeAreaInsets | null = null
let systemInfo: UniApp.GetSystemInfoResult | UniApp.WindowInfo = {} as any
// #ifdef MP-WEIXIN
systemInfo = uni.getWindowInfo()
safeAreaInsets = systemInfo.safeArea
  ? {
    top: systemInfo.safeArea.top,
    right: systemInfo.windowWidth - systemInfo.safeArea.right,
    bottom: systemInfo.windowHeight - systemInfo.safeArea.bottom,
    left: systemInfo.safeArea.left,
  }
  : null
// #endif
// #ifndef MP-WEIXIN
systemInfo = uni.getSystemInfoSync()
safeAreaInsets = systemInfo.safeAreaInsets
// #endif

// 动态计算容器样式（与课程预约页保持一致）
const containerStyle = computed(() => {
  return {
    marginTop: safeAreaInsets?.top + 'px',
    'background-color': '#f8e9d6', // 与课程预约页保持一致的背景色
  }
})

onLoad(() => {
  fetchCardList();
});

const fetchCardList = async () => {
  loading.value = true;
  try {
    const res = await getMyCards();
    if (res.code === 200) {
      cardList.value = res.data || [];
    } else {
      uni.showToast({ title: res.msg || '获取会员卡失败', icon: 'none' });
    }
  } catch (err) {
    console.error('获取会员卡失败:', err);
    uni.showToast({ title: '网络错误，请重试', icon: 'none' });
  } finally {
    loading.value = false;
  }
};

const navigateBack = () => {
  // 获取当前页面栈
  const pages = getCurrentPages();
  // 页面栈长度为1时，说明是第一个页面
  if (pages.length <= 1) {
    // 跳转到首页（根据你的实际首页路径修改）
    uni.redirectTo({
      url: '/pages/about/index' // 替换为你的首页路径
    });
  } else {
    // 正常返回上一页
    uni.navigateBack({
      delta: 1 // 返回的层级，1表示上一页
    });
  }
};

const viewDetail = (id: number) => {
  uni.navigateTo({ url: `/pages/mycard/detail?id=${id}` });
};

const useCard = (id: number) => {
  // 使用会员卡逻辑
};

const buyCard = () => {
  uni.navigateTo({ url: '/pages/membership/buy' });
};
</script>

<style scoped>
.container {
  min-height: 100vh;
}

.top-bar {
  background-color: rgba(245, 230, 216, 0.9);
  height: 88rpx;
  display: flex; /* 确保flex布局生效 */
  align-items: center;
  justify-content: space-between;
  padding: 0 20rpx; /* 适当调整内边距 */
}

.nav-back {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333; /* 确保与背景色有对比 */
  font-size: 36rpx; /* 增大图标尺寸 */
}


.title {
  color: #333;
  font-size: 36rpx;
}

.card-list {
  margin-top: 10rpx;
}

.card-item {
  background: linear-gradient(to right, #b34f44, #fab7ad); /* 与课程预约页保持一致的渐变 */
  border-radius: 12rpx;
  padding: 20rpx;
  color: #fff;
}

.card-type {
  font-size: 32rpx;
}

.card-status {
  font-size: 24rpx;
  padding: 4rpx 12rpx;
  border-radius: 20rpx;
}

.active {
  background-color: rgba(255, 255, 255, 0.2);
}

.expired {
  background-color: rgba(0, 0, 0, 0.2);
}

.card-number, .card-date {
  font-size: 28rpx;
  line-height: 1.5;
}

.balance-title {
  font-size: 24rpx;
}

.balance-value {
  font-size: 40rpx;
}

.card-bottom {
  margin-top: 20rpx;
}

.btn-detail, .btn-use {
  padding: 8rpx 20rpx;
  border-radius: 30rpx;
  border: 1px solid #fff;
  color: #fff;
}

.btn-use:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.empty-container {
  padding: 40rpx 0;
}

.btn-buy {
  background-color: #b32414;
  color: #fff;
  padding: 16rpx 40rpx;
  border-radius: 40rpx;
  font-size: 32rpx;
}
</style>
